<template>
	<div class="w100 h100 flex" style="background: #000">
		<div class="left flex-col p-t-26 p-l-10 p-b-10">
			<!-- 带班人员 -->
			<takePerson :list="takePersonList" :fileType="{ label: 'name', phone: 'phone' }" class="m-b-10" style="max-height: 200px; min-height: 100px" />
			<my-box class="m-b-10 f1 h0" title="人员“三违”情况">
				<template #right>
					<el-space>
						<div v-for="item in violateType" :key="item.name" class="point flex-center">
							<span :style="{ 'border-color': item.color }"></span>{{ item.name }}
						</div>
					</el-space>
				</template>
				<div class="f1 h0 flex-col violate">
					<div class="flex m-between">
						<my-date-picker type="month" v-model="violateMonth" now size="small"></my-date-picker>
						<el-button size="small" type="primary">查看详情</el-button>
					</div>
					<div class="f1 h0 overflow-y-auto">
						<div v-for="item in violateList" :key="item.workFaceName" class="m-t-8">
							<div class="m-b-4 violate-name">{{ item.workFaceName }}</div>
							<div class="flex">
								<div
									class="violate-item"
									:style="{
										background: violateType[0].color,
										width: `${((item.slightViolation * 100) / item.total).toFixed(2)}%`
									}"
								>
									{{ item.slightViolation }}
								</div>
								<div
									class="violate-item m-l-2 m-r-2"
									:style="{
										background: violateType[1].color,
										width: `${((item.usualViolation * 100) / item.total).toFixed(2)}%`
									}"
								>
									{{ item.usualViolation }}
								</div>
								<div
									class="violate-item"
									:style="{
										background: violateType[2].color,
										width: `${((item.seriousViolation * 100) / item.total).toFixed(2)}%`
									}"
								>
									{{ item.seriousViolation }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</my-box>
			<my-box class="flex-col f1 h0" title="安全隐患巡查">
				<template #right>
					<el-space>
						<div v-for="item in troubleType" :key="item.name" class="point flex-center">
							<span :style="{ 'border-color': item.color }"></span>{{ item.name }}
						</div>
					</el-space>
				</template>
				<div class="f1 h0 flex-col violate">
					<div class="flex m-between">
						<my-date-picker type="month" v-model="troubleMonth" now size="small"></my-date-picker>
						<el-button size="small" type="primary">查看详情</el-button>
					</div>
					<div class="f1 h0 overflow-y-auto">
						<div v-for="item in troubleList" :key="item.workFaceName" class="m-t-8">
							<div class="m-b-4 violate-name">{{ item.workFaceName }}</div>
							<div class="flex">
								<div
									class="violate-item"
									:style="{
										background: troubleType[0].color,
										width: `${((item.levelD * 100) / item.total).toFixed(2)}%`
									}"
								>
									{{ item.levelD }}
								</div>
								<div
									class="violate-item m-l-2 m-r-2"
									:style="{
										background: troubleType[1].color,
										width: `${((item.levelC * 100) / item.total).toFixed(2)}%`
									}"
								>
									{{ item.levelC }}
								</div>
								<div
									class="violate-item m-r-2"
									:style="{
										background: troubleType[2].color,
										width: `${((item.levelB * 100) / item.total).toFixed(2)}%`
									}"
								>
									{{ item.levelB }}
								</div>
								<div
									class="violate-item"
									:style="{
										background: troubleType[3].color,
										width: `${((item.levelA * 100) / item.total).toFixed(2)}%`
									}"
								>
									{{ item.levelA }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</my-box>
		</div>

		<div class="middle f1 w0 flex-col p-t-26 p-l-10 p-r-10 p-b-10">
			<div class="f1 h0 m-b-10 position-relative">
				<img class="b-img" src="@/assets/img/MakeDecision/决策分析底图.png" alt="" />
				<div
					v-for="(item, i) in markList"
					:key="item.modelType"
					:class="[
						`mark${i}`,
						'flex-col m-center s-center mark',
						markData[item.key] == 100 ? 'bimg-4' : markData[item.key] < 70 ? 'bimg-2' : markData[item.key] < 90 ? 'bimg-1' : 'bimg-3'
					]"
				>
					<span class="val">{{ markData[item.key] }}</span>
					<span class="name">{{ item.name }}</span>
				</div>
				<div class="center juzhong_transform tc">
					<div class="val">{{ markData.average }}</div>
					<div class="name">安全生产履职能力</div>
				</div>
			</div>
			<my-box class="flex-col" title="安全态势总体趋势" style="height: 250px; z-index: 2">
				<my-date-picker type="month" v-model="generalMonth" now size="small"></my-date-picker>
				<my-echarts :options="options"></my-echarts>
			</my-box>
		</div>

		<div class="right flex-col p-t-26 p-r-10 p-b-10">
			<my-box class="flex-col f1 h0 m-b-10" title="安全监测">
				<listDom :list="list1" />
			</my-box>
			<my-box class="flex-col f1 h0 m-b-10" title="水文监测">
				<listDom :list="list2" />
			</my-box>
			<my-box class="flex-col f1 h0 m-b-10" title="束管监测">
				<listDom :list="list3" />
			</my-box>
			<my-box class="flex-col f1 h0 m-b-10" title="矿压监测">
				<listDom :list="list4" />
			</my-box>
			<my-box class="flex-col f1 h0" title="微震监测">
				<listDom :list="list5" />
			</my-box>
		</div>
	</div>
</template>

<script setup name="/MakeDecision/secure">
import takePerson from '../components/takePerson.vue'
import listDom from './listDom.vue'
import {
	leadPersonInfo,
	personViolation,
	safetyPatrol,
	dynamicDiagnosis,
	generalStatistics,
	safetyMonitoring,
	hydrologyMonitoring,
	tubeMonitoring,
	pressureMonitoring,
	vibrationMonitoring
} from '@a/make-decision-secure.js'
import { ref } from 'vue'

/*********************************************** 带班人员 ************************************************/
let takePersonList = ref([])
leadPersonInfo().then((res) => {
	takePersonList.value = res.data
})

/*********************************************** 人员“三违”情况 ************************************************/
let violateType = [
		{ name: '轻微', color: '#47C185' },
		{ name: '一般', color: '#3978F3' },
		{ name: '严重', color: '#D18752' }
	],
	violateList = ref([]),
	violateMonth = ref('')

watchEffect(() => {
	if (violateMonth.value) {
		personViolation({ month: violateMonth.value }).then((res) => {
			violateList.value = res.data.map((item) => {
				item.total = sum([item.slightViolation, item.usualViolation, item.seriousViolation])
				return item
			})
		})
	}
})

/*********************************************** 安全隐患巡查 ************************************************/
let troubleType = [
		{ name: 'D类', color: '#47C185' },
		{ name: 'C类', color: '#4176DC' },
		{ name: 'B类', color: '#D18752' },
		{ name: 'A类', color: '#CD5A5C' }
	],
	troubleList = ref([]),
	troubleMonth = ref('')
watchEffect(() => {
	if (troubleMonth.value) {
		safetyPatrol({ month: troubleMonth.value }).then((res) => {
			troubleList.value = res.data.map((item) => {
				item.total = sum([item.levelA, item.levelB, item.levelC, item.levelD])
				return item
			})
		})
	}
})
/*********************************************** 安全监测 ************************************************/
let list1 = ref([])
safetyMonitoring().then((res) => {
	list1.value = res.data
})

/*********************************************** 水文监测 ************************************************/
let list2 = ref([])
hydrologyMonitoring().then((res) => {
	list2.value = res.data
})

/*********************************************** 束管监测 ************************************************/
let list3 = ref([])
tubeMonitoring().then((res) => {
	list3.value = res.data
})

/*********************************************** 矿压监测 ************************************************/
let list4 = ref([])
pressureMonitoring().then((res) => {
	list4.value = res.data
})

/*********************************************** 微震监测 ************************************************/
let list5 = ref([])
vibrationMonitoring().then((res) => {
	list5.value = res.data
})

/*********************************************** 安全生产履职能力 ************************************************/
const markList = [
		{
			name: '安监',
			key: 'monitoring'
		},
		{
			name: '地测',
			key: 'geology'
		},
		{
			name: '机电',
			key: 'electricity'
		},
		{
			name: '通防',
			key: 'guard'
		},
		{
			name: '生产',
			key: 'product'
		},
		{
			name: '调度',
			key: 'dispatch'
		}
	],
	markData = ref({})
dynamicDiagnosis().then((res) => {
	markData.value = res.data
})

/*********************************************** 安全态势总体趋势 ************************************************/
let PeakData = ref([]),
	generalMonth = ref(''),
	options = computed(() => {
		let seriesData = []
		const { modelType = [], dateTime = [], grade = [] } = PeakData.value
		modelType?.forEach((item, i) => {
			seriesData.push({
				name: item,
				data: grade[i],
				type: 'line',
				yAxisIndex: 0,
				symbol: 'circle',
				symbolSize: 7,
				barWidth: 14,
				splitNumber: 6,
				smooth: false,
				lineStyle: {
					width: 1
				}
			})
		})

		return EpitionsFn({
			grid: {
				top: 30
			},
			xAxis: {
				data: dateTime
			},
			legend: Elegend,
			series: seriesData
		})
	})
watchEffect(() => {
	if (generalMonth.value) {
		generalStatistics({ month: generalMonth.value }).then((res) => {
			PeakData.value = res.data
		})
	}
})
</script>

<style lang="scss" scoped>
//左侧样式
.left {
	position: relative;
	width: 380px;
	height: 100%;
	background: linear-gradient(90deg, #0d1018 0%, rgba(13, 16, 24, 0.6) 67%, rgba(13, 16, 24, 0) 100%);
	z-index: 2;
	box-sizing: border-box;
	.point {
		color: rgb(130, 135, 144);
		font-size: 12px;
		span {
			display: inline-block;
			width: 5px;
			height: 5px;
			border: 3px solid;
			border-radius: 50%;
			margin-right: 2px;
		}
	}
	.violate {
		&-name {
			color: rgba(255, 255, 255, 0.5);
		}
		&-item {
			color: #deedff;
			font-size: 12px;
			padding: 2px 4px;
		}
	}
}

//带班人员
$height: 32px;
.list {
	height: $height;
	background: rgba(62, 99, 176, 0.2);
	cursor: pointer;
	&-item {
		line-height: $height;
		.name {
			color: rgba(255, 255, 255, 0.6);
		}
		.warn {
			color: rgba(238, 90, 90, 1);
		}
	}

	& + .list {
		margin-top: 10px;
	}
}

//中间样式
.middle {
	.b-img {
		left: 50%;
		transform: translate(-50%, 0%);
		position: absolute;
		z-index: 0;
		height: 140%;
	}
	$width: 100px;
	.mark {
		.val {
			font-size: 24px;
		}
		.name {
			font-size: 14px;
		}
	}
	.mark0 {
		position: absolute;
		width: $width;
		height: $width;
		top: 60%;
		left: 7%;
		// @extend .animation;
	}
	.animation {
		animation: zy 2.5s 0.15s linear infinite;
		-moz-animation: zy 2.5s 0.15s linear infinite;
		-o-animation: zy 2.5s 0.15s linear infinite;
		-ms-animation: zy 2.5s 0.15s linear infinite;
		-webkit-animation: zy 2.5s 0.15s linear infinite;
	}
	@keyframes zy {
		10% {
			transform-origin: top;
			transform: rotate(20deg);
		}

		20% {
			transform: rotate(-15deg);
		}

		30% {
			transform: rotate(5deg);
		}

		40% {
			transform: rotate(-5deg);
		}

		50%,
		100% {
			transform: rotate(0deg);
		}
	}

	.mark1 {
		position: absolute;
		width: $width;
		height: $width;
		top: 27.5%;
		left: 15%;
	}
	.mark2 {
		position: absolute;
		width: $width;
		height: $width;
		top: 5%;
		left: 33%;
	}
	.mark3 {
		position: absolute;
		width: $width;
		height: $width;
		top: 5%;
		right: 33%;
	}
	.mark4 {
		position: absolute;
		width: $width;
		height: $width;
		top: 27.5%;
		right: 15%;
	}
	.mark5 {
		position: absolute;
		width: $width;
		height: $width;
		top: 60%;
		right: 7%;
	}
	.bimg-1 {
		background: url('@/assets/img/MakeDecision/橙.png') no-repeat;
		background-size: 100%;
		.val {
			color: rgba(255, 106, 106, 1);
		}
		.name {
			color: rgba(243, 161, 161, 1);
		}
	}
	.bimg-2 {
		background: url('@/assets/img/MakeDecision/红.png') no-repeat;
		background-size: 100%;
		.val {
			color: rgba(255, 171, 0, 1);
		}
		.name {
			color: rgba(243, 187, 161, 1);
		}
	}
	.bimg-3 {
		background: url('@/assets/img/MakeDecision/蓝.png') no-repeat;
		background-size: 100%;
		.val {
			color: rgba(0, 253, 255, 1);
		}
		.name {
			color: rgba(161, 215, 243, 1);
		}
	}
	.bimg-4 {
		background: url('@/assets/img/MakeDecision/绿.png') no-repeat;
		background-size: 100%;
		.val {
			color: rgba(7, 255, 131, 1);
		}
		.name {
			color: rgba(161, 243, 202, 1);
		}
	}
	.center {
		text-align: center;
		.val {
			color: #07ff83;
			text-shadow: 0px 0px 20px rgba(11, 255, 0, 0.4);
			font-size: 50px;
			font-weight: 900;
		}
		.name {
			background: linear-gradient(180deg, #ffffff 13%, #91f0ff 81%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-shadow: 0px 0px 20px rgba(0, 31, 64, 0.88);
			font-size: 24px;
		}
	}
}
//右侧样式
.right {
	position: relative;
	width: 400px;
	height: 100%;
	z-index: 2;
	height: 100%;
	$height: 32px;
}
</style>
